<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.content {
				height: 50px;
				width: 100%;
				background-color: skyblue;
			}
			.content form {
				position: relative;
				
			}
			.content  form input{
				height: 40px;
				width: 100%;
				
				margin-top: 5px;
				border-radius:5px ;
				padding-left: 20px;
			}
			.content  form button {
				height: 40px;
				width: 40px;
				position: absolute;
				top: 5px;
				right: 0;
			}
			.content  form button span{
				/*display: inline-block;*/
				height: 40px;
				line-height: 40px;
				
			}
			.content  form button span:hover{
				color: skyblue;
				
			}
			
			
			/*.container > ul > li > p {
				float: left;
			}
			.container > ul > li > div {
				float: right;
			}
			.container  > ul > li > div > span:hover{
				color: skyblue;
			}*/
		</style>
	</head>
	<body>
	
			<div class="content">
				<div class="form">
					<form>
						<input type="text" placeholder="请输入要添加的信息" name="item" id="item"/>
						<button type="submit" >
							<span class="glyphicon glyphicon-plus"></span>
						</button>
					</form>
				</div>
			</div>
			
			
			
			<div class="container">
				<ul class="todo" id="todo">
					<% todos.forEach(function(todo){%>		
						<li>
							<p><%= todo.item %></p>
							<div>
								<span class="glyphicon glyphicon-trash deleted"></span>
								<span class="glyphicon glyphicon-ok"></span>
							</div>
						</li>
					<% }) %>
				</ul>
			</div>
		
	</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.content').on('submit',function(){
			var item = $('form input');
//			console.log(item)
			var todo = {item:item.val()};
//			console.log(todo)
			if (todo.item == ''){
				alert('输入不能为空');
//				return;
			}
			$.ajax({
				type:"POST",
				url:"/todo",
				data:todo,
				success:function(data){
					console.log(123)
				}
			});

		})
		
		$('.deleted').on('click',function(){
//			console.log(1)
			//$(this).parent().parent().text() 拿到span的父元素的父元素的内容
			var item = $.trim($(this).parent().parent().text()); //阿第三方第三方
			console.log(item);
			
			$.ajax({
				type:"DELETE",
				url:"/todo/" + item,
				success:function(data){
//					自动刷新页面
					location.reload();
				}
			});
		})
	})
</script>